<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>选项卡</title>

    <style>
        *{
            margin: 0;
            padding: 0;
        }
        #card{
            width: 300px;
            height: 200px;
            margin:  300px auto
        }
        #tit{
            width: 100%;
            height: 35px;
            line-height: 35px;
            overflow: hidden;
        }
        #tit h3{
            width: 96px;
            background: #ddd;
            float: left;
            line-height: 35px;
            text-align: center;
            border: 2px solid #ffffff;
            font-size: 14px;
        }
        #content{
            width: 100%;
            height: 175px;
            background: #999;
        }
        ul li{
            list-style: none;
        }
        #content div{
            display: none;
        }
        #content .one{
            display: block;
        }
        #tit .titin {
            border: 2px solid #999;
            background: #999;
        }
    </style>
</head>

<body>
    <div id="card">
        <div id="tit">
            <h3 onmousemove="show(0)" class="titin">第1项</h3>
            <h3 onmousemove="show(1)">第2项</h3>
            <h3 onmousemove="show(2)">第3项</h3>
        </div>
        <div id="content">
            <div class="one">
                <ul>
                    <li>aaaaaaaaaa</li>
                    <li>aaaaaaaaaa</li>
                    <li>aaaaaaaaaa</li>
                    <li>aaaaaaaaaa</li>
                    <li>aaaaaaaaaa</li>
                    <li>aaaaaaaaaa</li>
                </ul>
            </div>
            <div>
                <ul>
                    <li>bbbbbbb</li>
                    <li>bbbbbbb</li>
                    <li>bbbbbbb</li>
                    <li>bbbbbbb</li>
                    <li>bbbbbbb</li>
                    <li>bbbbbbb</li>
                </ul>
            </div>
            <div>
                <ul>
                    <li>cccccccc</li>
                    <li>cccccccc</li>
                    <li>cccccccc</li>
                    <li>cccccccc</li>
                    <li>cccccccc</li>
                    <li>cccccccc</li>
                </ul>
            </div>
        </div>
    </div>
</body>

</html>
<!-- <script src="http://code.jquery.com/jquery-2.0.0.min.js"></script> -->
<script>
    let h3s =  document.getElementsByTagName('h3')
    let cdivs = document.querySelectorAll('#content div')

    function show(val) { 
        for (let i=0;i<h3s.length; i++ ) {
            if (i === val) {
                h3s[val].className = "titin";
                cdivs[val].style.display = "block";
            } else {
                h3s[i].className = "";
                cdivs[i].style.display = "none";
            }
        }

     }
</script>